import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	toJS
} from 'mobx';
import {
	List,
	Tools,
	Steps,
	Button,
	WingBlank,
	WhiteSpace,
} from "weaver-mobile";
import {
	Form
} from 'weaver-mobile-page';
import '../../../style/forgetPassword.less';
import VerificationCode from './VerificationCode';
import TimerButton from './TimerButton';

const getLabel = Tools.getLabel;
const Step = Steps.Step;

const Title = props => <div className='password-title'>{getLabel(517847,'密码找回')}</div>;

const ProgressSteps = props => {
	const {
		current,
		number
	} = props;

	const steps = [];

	for (let i = 0; i < number; i++) {
		steps.push(<Step key={i}/>);
	}

	return (
		<div className='step'>
			<Steps current={current} direction="horizontal">
				{steps}
			</Steps>
		</div>
	)

}

const Blank = props => {
	const {
		number,
		size,
	} = props;

	const c = [];

	for (let i = 0; i < number; i++) {
		c.push(<WhiteSpace size={size} key={i}/>);
	}

	return (
		<div>{c}</div>
	)
}

const SubTitle = props => {
	const {
		serial,
		subTitle
	} = props;

	return (
		<div className='color-grey sub'>
			<div className='float-left circle'>
				<span className='circle-number'>{serial}</span>
			</div>
			<span className='sub-title f16'>{subTitle}</span>
		</div>
	)
}

const DynamicForm = props => {
	const {
		form,
		conditions,
		isInit,
		date,
		repeatSend,
		reCountDown,
	} = props;

	const getExtra = (domkey) => {
		const key = domkey[0];

		if (key === 'validatecode') {
			return (
				<div className='form-img'>
			      	<VerificationCode date={date} extra={{from: '_forgort'}}/>
			    </div>
			)
		}
		if (['phoneCode', 'emailCode'].includes(key)) {
			return <TimerButton reCountDown={reCountDown} onClick={repeatSend} />
		}
	}

	const getFields = () => {
		const fields = [];

		if (isInit) {
			conditions.forEach(c => {
				c.items.forEach((field, index) => {
					const {
						domkey
					} = field;

					fields.push(<Form.Item
				        key={field.domkey.join('__')}
				        form={form}
				        fieldConfig={field}
				        onChange={form.onChange}
				        extra={getExtra(domkey)}
					/>);
				});
			});
		}
		return fields;
	}
	return (
		<div className='form'>
			<Form style={{ height: '100%' }} >
		        <List>
		          {getFields()}
		        </List>
	      	</Form>
	      	
		</div>
	)
}

const FootButton = props => {
	const {
		title,
		onClick
	} = props;

	return (
		<div className='foot-button'>
			<Button 
		    	type='primary'
		    	onClick={onClick}
		    >
		    	{title}
		    </Button>
		</div>
	)
}

const Back = props => {
	const {
		onClick
	} = props;

	return (
		<div className='back'>
			<span onClick={onClick}>{getLabel(387341,'更换其他验证方式')}</span>
		</div>
	)
}

@inject('forgetPasswordStore')
@observer
export default class ForgetPassword extends Component {
	constructor(props) {
		super(props);

		this.state = {
			show: false
		}
	}

	componentDidMount() {
		const {
			forgetPasswordStore: store
		} = this.props;
		const search = this.props.location.search;

		const {
			languageId,//可能存在zh和7两种情况
		} = this.getUrlParams(search);

		//languageId为字母时，转换成数字
		const lang = {
			"zh": "7",
			"en": "8"
		}

		//从登录页进入
		if (languageId) {
			const id = lang[languageId] || languageId;
			Tools.getLocaleLabelByLang('common,hrm', id).then(() => {
				this.setState({
					show: true
				})

				store.setLanguageId(id);
				store.getForm();
			}) 
		}else{
			this.setState({
				show: true
			})
			store.getForm();
		}

		
	}

	getUrlParams = (search) => {
		const params = {};
		if (search) {
			search.split("?")[1].split("&").forEach(item => {
				const param = item.split("=");
				if ( ["languageId"].includes(param[0])) {
					Object.assign(params,{
						[param[0]]: param[1]
					});
				}
			})
		}
		return params;
	}


	handleClick = () => {
		const {
			forgetPasswordStore: store
		} = this.props;

		const {
			current,
			firstStepClickChain,
			secondStepClickChain,
			thirdStepClickChain,
			collectParams,
		} = store;

		collectParams();

		(current === 0) && firstStepClickChain();

		(current === 1) && secondStepClickChain();

		(current === 2) && thirdStepClickChain();
	}

	render() {
		if (!this.state.show) {
			return null;
		}

		const {
			forgetPasswordStore: store
		} = this.props;

		const {
			form,
			current,
			datas,
			steps,
			date,
			subTitle,
			buttonTitle,
			goBack,
			reCountDown,
			repeatSend,
		} = store;

		const {
			conditioninfo,
			isInit
		} = form;

		return (
			<div className='forget-password'>
				<Title />
				<div className='scroll'>
					<Blank number={1} size={'xl'}/>
					<ProgressSteps current={current} number={steps}/>
					<Blank number={3} size={'lg'}/>
					<SubTitle serial={current + 1} subTitle={subTitle} />
					<Blank number={1} size={'xl'}/>	
					<DynamicForm 
						conditions={conditioninfo} 
						isInit={isInit} 
						form={form} 
						date={date}
						reCountDown={reCountDown}
						repeatSend={() => repeatSend()}
					/>
					{
						current === 1 && <Back onClick={() => goBack()}/>
					}
					<Blank number={1} size={'xl'}/>
				</div>
				<FootButton onClick={() => this.handleClick()} title={buttonTitle}/>
			</div>
		);
	}
}